<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>人员</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_739294_sdr2fh5bgwj.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/my.css" media="all">

</head>

<body>
    <div class="layui-fluid" id="LAY-component-grid-list">
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-normal" id='add'><i class="layui-icon">&#xe61f;</i>新增条码信息</button>
            <button class="layui-btn layui-btn-normal" id='ok'><i class="layui-icon">&#xe615;</i>正常状态条码信息</button>
            <button class="layui-btn layui-btn-normal" id='stop'><i class="layui-icon">&#xe615;</i>全部状态条码信息</button>
        </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;搜索条码信息：
        <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" autocomplete="off" placeholder="请输入条码信息名称">
        </div>
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-normal" data-type="reload" id="serch"> <i class="layui-icon">&#xe615;</i>搜索</button>
            <button class="layui-btn layui-btn-normal" data-type="reload" id="screen"><i class="iconfont icon-xuanzexiangmu"></i>表头筛选</button>
            <button class="layui-btn layui-btn-normal" data-type="reload" id="print"><i class="iconfont icon-dayin1"></i>打印</button></div>

        <table id="demo" lay-filter="test"></table>
    </div>
    <script src="../../layuiadmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: '../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index']);
        var cols = [ //表头
            {
                type: "checkbox"
            }, {
                field: 'id',
                title: 'ID',
                width: '10%',
                sort: true,
                align: 'center',
                event: 'info',
                templet: function(d) {
                    if (d.isdel == 0) {
                        return d.id;
                    } else {
                        return '<span style="color:red">' + d.id + '</span>';
                    }
                }
            }, {
                field: 'isdel',
                title: '状态',
                width: '8%',
                align: 'center',
                templet: function(d) {
                    if (d.isdel == 0) {
                        return '正常';
                    } else {
                        return '<span style="color:red">停用</span>';
                    }
                }
            }, {
                field: 'areaname',
                title: '物业公司',
                width: '25%',
                templet: function(d) {
                    if (d.isdel == 0) {
                        return d.areaname;
                    } else {
                        return '<span style="color:red">' + d.areaname + '</span>';
                    }
                }

            }, {
                field: 'no',
                title: '员工号',
                width: '11%',
                templet: function(d) {
                    if (d.isdel == 0) {
                        return d.no;
                    } else {
                        return '<span style="color:red">' + d.no + '</span>';
                    }
                }

            }, {
                field: 'name',
                title: '员工姓名',
                width: '10%',
                templet: function(d) {
                    if (d.isdel == 0) {
                        return d.name;
                    } else {
                        return '<span style="color:red">' + d.name + '</span>';
                    }
                }

            }, {
                field: 'nfcname',
                title: '智能卡',
                width: '11%',
                templet: function(d) {
                    if (d.nfcname == null || d.nfcname == undefined) {
                        d.nfcname = "";
                    }
                    if (d.isdel == 0) {
                        return d.nfcname;
                    } else {
                        return '<span style="color:red">' + d.nfcname + '</span>';
                    }
                }

            }, {
                field: 'memo',
                title: '备注',
                width: '10%',
                templet: function(d) {
                    if (d.isdel == 0) {
                        return d.memo;
                    } else {
                        return '<span style="color:red">' + d.memo + '</span>';
                    }
                }
            }, {
                fixed: 'right',
                title: '操作',
                width: '12%',
                align: 'center',
                toolbar: '#barDemo'
            }
        ];
        layui.use('table', function() {
            var table = layui.table;
            var $ = layui.$;
            var tableIns = table.render({
                elem: '#demo',
                height: 'full-90',
                url: '../../../Employees/select' //数据接口
                    ,
                page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档							
                    limit: 20,
                    limits: [20, 40, 60, 80, 100]

                },
                cols: [cols],
                skin: 'row' //表格风格
                    ,
                even: true
            });

            function edit(obj) {
                layer.open({
                    type: 2,
                    title: ['编辑条码信息', 'background:#1e9fff;color:white;font-size:17px;font-weight:bold'],
                    content: 'collectoredit.html',
                    area: ['800px', '500px'],
                    maxmin: true,
                    offset: 'auto',
                    success: function(layero, index) {
                        var body = layer.getChildFrame('body', index);
                        body.find('#no').val(obj.no);
                        body.find('#name').html(obj.name);
                        body.find('#nfcname').html(obj.nfcname);
                        body.find('#memo').val(obj.memo);
                        body.find('#areaname').val(obj.areaname);
                        body.find('#id').val(obj.id)
                    }
                });
            }

            //监听工具条
            table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）			 			
                if (data.isdel == 0) {
                    if (layEvent === 'del') { //删除
                        layer.confirm('是否确认停用', function(index) {
                            $.ajax({
                                url: '../../../Employees/del',
                                datatype: 'json',
                                data: {
                                    ids: data.id
                                },
                                success: function(res) {
                                    if (res.data == "ok") {
                                        layer.msg('停用成功', {
                                            offset: 'auto',
                                            icon: 1,
                                            time: 1500,
                                            end: function() {
                                                layer.close(index); // 关闭layer
                                                window.location.reload()
                                            }
                                        })
                                    } else if (res.data === '无权限') {
                                        layer.msg('没有权限,停用失败', {
                                            offset: 'auto',
                                            icon: 2,
                                            time: 1000,
                                            end: function() {
                                                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                                parent.layer.close(index);
                                            }
                                        })
                                    } else {
                                        layer.msg('停用失败', {
                                            offset: 'auto',
                                            icon: 2,
                                            time: 1000,
                                            end: function() {
                                                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                                parent.layer.close(index);
                                            }
                                        })
                                    }

                                },

                            });
                            //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存

                        });
                    } else if (layEvent === 'edit' || layEvent === 'info') { //编辑
                        edit(data);
                    }
                } else {
                    layer.msg('该条码信息已经停用，无法进行操作', {
                        offset: 'auto',
                        icon: 2,
                        time: 1500
                    })
                }
            });
            //查询所有状态
            $("#stop").on('click', function() {
                tableIns.reload({
                    url: '../../../Employees/select',
                    where: {
                        isdel: 'true',
                        keyword: ""
                    } //设定异步数据接口的额外参数
                    ,
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
                $("table tr").css({
                    "background": "#1e9fff",
                    "color": "white"
                });
            });
            //查询正常状态
            $("#ok").on('click', function() {
                tableIns.reload({
                    url: '../../../Employees/select',
                    where: {
                        isdel: 'false',
                        keyword: ""
                    } //设定异步数据接口的额外参数
                    ,
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
                $("table tr").css({
                    "background": "#1e9fff",
                    "color": "white"
                });
            });
            $("#serch").on('click', function() {
                tableIns.reload({
                    url: '../../../Employees/select',
                    where: {
                        isdel: 'true',
                        keyword: $("#demoReload").val()
                    } //设定异步数据接口的额外参数
                    ,
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
                $("table tr").css({
                    "background": "#1e9fff",
                    "color": "white"
                });
            });
            $("#print").on("click", function() {
                var checkStatus = table.checkStatus('demo');
                d = checkStatus.data.length;
                if (d != 0) {
                    var data = checkStatus.data;
                    var ids = new Array();
                    for (var i = 0; i < d; i++) {
                        ids[i] = data[i].id;
                    }
                    ids = ids.toString();
                    layer.confirm('<span style="font-size:17px;font-weight:bold;">请选择打印类型</span>', {
                        title: "",
                        btnAlign: 'c',
                        btn: ['条码', '二维码'] //按钮
                    }, function(index) {
                        print(ids, 0);
                        layer.close(index)
                    }, function(index) {
                        print(ids, 1);
                        layer.close(index)
                    });
                } else {
                    layer.msg('请至少选择1行数据', {
                        offset: 'auto',
                        icon: 2,
                        time: 2000
                    })
                }

            })
            var alos = cols;
            $("#screen").on('click', function() {
                cols = [ //表头
                    {
                        type: "checkbox"
                    }, {
                        field: 'id',
                        title: 'ID',
                        width: '10%',
                        sort: true,
                        align: 'center',
                        event: "info",
                        templet: function(d) {
                            if (d.isdel == 0) {
                                return d.id;
                            } else {
                                return '<span style="color:red">' + d.id + '</span>';
                            }
                        }
                    }, {
                        field: 'isdel',
                        title: '状态',
                        width: '8%',
                        align: 'center',
                        templet: function(d) {
                            if (d.isdel == 0) {
                                return '正常';
                            } else {
                                return '<span style="color:red">停用</span>';
                            }
                        }
                    }, {
                        field: 'areaname',
                        title: '物业公司',
                        width: '25%',
                        templet: function(d) {
                            if (d.isdel == 0) {
                                return d.areaname;
                            } else {
                                return '<span style="color:red">' + d.areaname + '</span>';
                            }
                        }

                    }, {
                        field: 'no',
                        title: '员工号',
                        width: '11%',
                        templet: function(d) {
                            if (d.isdel == 0) {
                                return d.no;
                            } else {
                                return '<span style="color:red">' + d.no + '</span>';
                            }
                        }

                    }, {
                        field: 'name',
                        title: '员工姓名',
                        width: '10%',
                        templet: function(d) {
                            if (d.isdel == 0) {
                                return d.name;
                            } else {
                                return '<span style="color:red">' + d.name + '</span>';
                            }
                        }

                    }, {
                        field: 'nfcname',
                        title: '智能卡',
                        width: '11%',
                        templet: function(d) {
                            if (d.nfcname == null || d.nfcname == undefined) {
                                d.nfcname = "";
                            }
                            if (d.isdel == 0) {
                                return d.nfcname;
                            } else {
                                return '<span style="color:red">' + d.nfcname + '</span>';
                            }
                        }

                    }, {
                        field: 'memo',
                        title: '备注',
                        width: '10%',
                        templet: function(d) {
                            if (d.isdel == 0) {
                                return d.memo;
                            } else {
                                return '<span style="color:red">' + d.memo + '</span>';
                            }
                        }
                    }, {
                        fixed: 'right',
                        title: '操作',
                        width: '12%',
                        align: 'center',
                        toolbar: '#barDemo'
                    }
                ];
                layer.open({
                    type: 2,
                    title: ['表头筛选', 'background:#1e9fff;color:white;font-size:17px;font-weight:bold'],
                    area: ['650px', '200px'],
                    offset: 'auto',
                    maxmin: true,
                    content: 'collectscreen.html',
                    btn: ['确认', '取消'],
                    success: function(layero, index) {
                        var body = layer.getChildFrame('body', index);
                        for (var k = 0; k < alos.length; k++) {
                            body.find("#" + alos[k].field).prop("checked", true);
                        }
                    },
                    yes: function(index, layero) {
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();

                        var a = iframeWin.a();
                        for (var i = 0; i < a.length; i++) {
                            for (var j = 0; j < cols.length; j++) {
                                if (a[i] == cols[j].field) {

                                    cols.splice(j, 1)
                                }
                            }

                        }
                        alos = cols;
                        tableIns.reload({
                            cols: [cols]

                        });

                        layer.close(index);

                        $("table tr").css({
                            "background": "#1e9fff",
                            "color": "white"
                        });
                    }
                })

            })

            $("table tr").css({
                "background": "#1e9fff",
                "color": "white"
            });
        });
        layui.use('layer', function() {
            var $ = layui.jquery,
                layer = layui.layer;
            $("#add").on('click', function() {
                layer.open({
                    type: 2,
                    title: ['新增条码信息', 'background:#1e9fff;color:white;font-size:17px;font-weight:bold'],
                    content: 'collectoradd.html',
                    maxmin: true,
                    area: ['800px', '500px'],
                    offset: 'auto'

                })
            });
        });

        function print(id, type) {
            var url = '../../../Code/codeEmp?id=' + id + '&type=' + type;
            window.open(url);
        }
    </script>
    <script type="text/html" id="barDemo">
        <div class="layui-btn-group">
            <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>停用</a>
        </div>
    </script>
</body>

</html>